<!--  -->
<template>
  <div>
    <!-- <div class="create-flowy hover-card"
       paramsValueSend=''
       style="background: #ffffff;border: 1px solid #FCFCFC;border-radius: 6px;z-index: 1;"> -->
    <div class="flowy-card">
      <div class="flowy-card-icon">
        <el-image class="flowy-card-icon-image"
                  draggable="false"
                  :src="blockInfo.icon || defaultScriptIcon"
                  fit="fill"></el-image>
      </div>
      <div class="flowy-card-item">
        <div class="title">
          <el-tooltip :open-delay="1000" :content="blockInfo.name"
                      v-if="blockInfo.name.length>40"
                      placement="top">
            <span style="display:inline-block;width: 270px;overflow:hidden;text-overflow: ellipsis;">{{ blockInfo.name }}</span>
          </el-tooltip>
          <span class="el-tooltip"
                v-else
                style="display:inline-block;width: 290px;overflow:hidden;text-overflow: ellipsis;">{{ blockInfo.name }}</span>
          <!-- <div class="more_operation">
            <div class="el-icon-more"></div>
            <div class="drop_down_block">
              <div class="edit_operation">
                <div class="cuifont icon_edit"></div>
                <div>Edit</div>
              </div>
            </div>
          </div> -->
        </div>
        <!-- <div class="tips">
          <div class="tips-area">{{ blockInfo.description }}</div>
        </div> -->
        <!-- <div class="description">
          <div class="content-area">{{ blockInfo.description }}</div>
          <div class="edit_icon_desc">
            <span class="cuifont icon_edit"></span>
          </div>
          <div class="input_desc"><input type="text"></div>
        </div> -->
      </div>
    </div>
    <div style="width:100%;height:58px;line-height:24px;color:#7f7f7f;padding:0 10px 10px 40px;
    display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{ blockInfo.briefDescription }}</div>
    <!-- <SettingModel :ref="`setting-model`"
                  :blockInfo='blockInfo' /> -->
    <!-- </div> -->
  </div>
</template>

<script>
// import mixinBlockCardViewModel from './block-card-view-model'
// import SettingModel from './setting-model'

export default {
  // components: { SettingModel },
  // mixins: [mixinBlockCardViewModel],
  props: {
    blockInfo: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      defaultScriptIcon: this.$ossLink + '/app/bot/script/script_icon_general.png'
    }
  },
  created () { },
  methods: {
  }
}
</script>

<style scoped lang='scss'>
$--icon-width: 60px;
.hover-card {
}
.flowy-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 8px;
  width: 340px;
  z-index: 1;
  .flowy-card-icon {
    // width: $--icon-width;
    height: 100%;
    // padding: 19px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    &-image {
      width: 20px;
      height: 20px;
      border: 1px solid #efefef;
      border-radius: 4px;
    }
  }

  .flowy-card-item {
    flex: 1;
    height: 100%;
    overflow: visible;

    .title {
      font-size: 1.2em;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 16px 0 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: visible;

      .el-tooltip {
        font-weight: 600;
        color: rgba(0, 0, 0, 0.75);
        text-overflow: ellipsis;
        width: 170px;
        overflow: hidden;
        height: 20px;
        font-size: 14px;
        color: #404040;
        line-height: 20px;
      }

      .more_operation {
        position: relative;
        display: flex;
        width: 14px;
        height: 14px;

        .el-icon-more {
          font-size: 15px;
          color: #7b7b7b;
          cursor: pointer;
        }

        .icon_edit {
          width: 25px;
          height: 100%;
          font-size: 14px;
        }

        img {
          width: 100%;
          height: 100%;
        }

        .drop_down_block {
          display: none;
          position: absolute;
          background-color: #fff;
          width: 150px;
          box-shadow: -2px 0px 8px 0px rgba(107, 107, 107, 0.1);
          border-radius: 2px;
          top: 25px;
          left: -50%;
          z-index: 1000;

          .edit_operation {
            padding-left: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            font-size: 14px;

            img {
              height: 14px;
              width: 14px;
              margin-right: 10px;
            }
          }
        }
      }
    }

    .tips {
      border-top: 1px dotted #efefef;
    }

    .description {
      position: relative;
      border-top: 1px solid #efefef;

      .edit_icon_desc {
        display: none;
        position: absolute;
        top: 5px;
        right: 15px;
        width: 14px;
        height: 14px;
        cursor: pointer;

        .icon_edit {
          font-size: 14px;
        }
      }

      .input_desc {
        display: none;
        padding: 5px 0;

        input {
          border: 1px solid #efefef;
          height: 40px;
          width: 80%;
        }
      }
    }

    .description:hover .edit_icon_desc {
      display: block;
    }

    .tips-area,
    .content-area {
      width: 100%;
      height: 56px;
      line-height: 28px;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding-right: 16px;
      color: #666666;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

.action .content,
.content .tips {
  display: none;
}
</style>
